import { useEffect, useState } from "react";
import { Card, Row, Col } from "antd";
import { fetchAreaStatistics } from "@/api/order";

export default (data, onClick) => {
  const [list, setList] = useState([]);
  const [areaName, setAreaName] = useState("");
  const getAreaStatistics = async (data = {}) => {
    const res = await fetchAreaStatistics(data);
    setList(res?.data || []);
  };

  useEffect(() => {
    getAreaStatistics(data);
  }, []);

  return (
    <Row gutter={10}>
      {list?.map((item) => (
        <Col span={4}>
          <Card
            style={{
              marginBottom: 20,
              cursor: "pointer",
              backgroundColor: areaName === item.areaName ? "#1890ff" : "",
              color: areaName === item.areaName ? "#fff" : "",
            }}
            onClick={() => {
              setAreaName(item.areaName);
              onClick && onClick(item);
            }}
          >
            <div style={{ display: "flex", justifyContent: "space-between" }}>
              <span>{item.areaName}</span>
              <span>{item.count}份</span>
            </div>
          </Card>
        </Col>
      ))}
    </Row>
  );
};
